<template>
    <div class="leftTop">
        <div class="leftTopLeft">
            <div class="title">
                <div class="titleImg"></div>
                <div @click="toGoodPlace">好地方指数</div>
                <div class="titleNum">{{89.09}}</div>
            </div>
            <div class="content">
                <div id="leftTopChart1"></div>
            </div>
        </div>
        <div class="leftTopRight">
            <div class="leftTopRightTabs">
                <div class="quanxian" :class="{fontActive1:isBenxian}">本县排行</div>
                <div class="quansheng" :class="{fontActive2:!isBenxian}">全省排行</div>
            </div>
            <div class="content">
                <div class="tableBody">
                    <div class="tableBodyTd" v-for="(item,index) of benxian" :key="index">
                        <div class="tableBodyId" :class="{active1:index<3}">{{index+1}}</div>
                        <div class="tableBodyQuyu" :class="{active2:index<3}">{{item.name}}</div>
                        <div class="tableBodyNum" :class="{active3:index<3}">{{item.value}}</div>
                    </div>
                </div>
                <div class="seeMore">查看更多</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isBenxian: true,
            zhishuArr: [
                { name: "好地方综合", value: 90.63 },
                { name: "好生态", value: 90.54 },
                { name: "好景致", value: 89.67 },
                { name: "治理巡查", value: 90.29 },
                { name: "好产业指数", value: 88.29 },
                { name: "好人文", value: 89.34 },
                { name: "好生活", value: 87.83 },
                { name: "防疫-复工复产", value: 89.6 },
            ],
            benxian: [
                { name: "华埠镇", value: 91.85 },
                { name: "桐村镇", value: 91.81 },
                { name: "杨林镇", value: 90.03 },
                { name: "音坑乡", value: 88.18 },
                { name: "芹阳办事处", value: 89.92 },
                { name: "中村乡", value: 87.14 },
                { name: "林山乡", value: 91.52 },
                { name: "池淮镇", value: 89.74 },
                { name: "苏庄镇", value: 89.34 },
                // {name:'长虹乡',value:91},
                // {name:'马金镇',value:90.9},
                // {name:'村头镇',value:90.5},
                // {name:'齐溪镇',value:89.6},
                // {name:'何田乡',value:88.8},
                // {name:'大溪边乡',value:86}
            ],
            quansheng: [
                { name: "华埠镇1", value: 91 },
                { name: "华埠镇1", value: 91 },
                { name: "华埠镇1", value: 91 },
                { name: "华埠镇1", value: 91 },
                { name: "华埠镇1", value: 91 },
                { name: "华埠镇1", value: 91 },
                { name: "华埠镇1", value: 91 },
                { name: "华埠镇1", value: 91 },
            ],
            tableData: [
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    address: " 1518 弄",
                },
                {
                    date: "2016-05-04",
                    name: "王小虎",
                    address: " 1517 弄",
                },
                {
                    date: "2016-05-01",
                    name: "王小虎",
                    address: " 1519 弄",
                },
                {
                    date: "2016-05-03",
                    name: "王小虎",
                    address: "1516 弄",
                },
            ],
        };
    },
    mounted() {
        this.benxian.sort((b,a)=>{return a.value-b.value})
        this.draw1();
    },
    methods: {
        toGoodPlace() {
            this.$router.push("/goodPlace");
        },
        draw1() {
            let myChart = this.$echarts.init(
                document.getElementById("leftTopChart1")
            );
            const grayBar = [100, 100, 100, 100, 100, 100, 100, 100];
            let option = {
                grid: {
                    left: "-100px", // 距离dom间距
                    right: "1px",
                    top: "5%",
                    bottom: "1%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: "value",
                        axisPointer: {
                            type: "shadow",
                        },
                        // 横坐标 分割线等取消显示
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                        },
                    },
                ],
                yAxis: [
                    {
                        type: "category",
                        inverse: true,
                        axisLabel: {
                            verticalAlign: "bottom",
                            align: "left",
                            padding: [0, 10, 10, 6],
                            textStyle: {
                                fontSize: 14,
                                color: "white",
                                fontFamily: "Source Han Sans CN",
                            },
                            formatter(value, index) {
                                index += 1;
                                return `{text1|${value}}`;
                            },
                            rich: {
                                rank1: {
                                    width: 36,
                                    height: 20,
                                    color: "#FD4844",
                                    align: "center",
                                },
                                rank2: {
                                    width: 36,
                                    height: 20,
                                    color: "#FBA13A",
                                    align: "center",
                                },
                                rank2: {
                                    width: 36,
                                    height: 20,
                                    color: "#56E7FD",
                                    align: "center",
                                },
                                rank4: {
                                    // padding: [0, 0, 0, 4],
                                },
                            },
                        },
                        // 纵坐标数据
                        data: Array.from(this.zhishuArr, ({ name }) => name),

                        yAxisIndex: 0,
                        // 横坐标 分割线等取消显示
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                    },

                    {
                        type: "category",
                        inverse: true,
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            inside: false,
                            verticalAlign: "bottom",
                            // 位置 上右下左
                            padding: [0, 10, 10, 0],
                            lineHeight: "5",
                            textStyle: {
                                fontSize: 14,
                                color: "#45F4F7",
                                fontFamily: "SourceHanSansCN-Regular",
                            },
                        },
                        // 统计的总量 用纵坐标模拟
                        data: Array.from(this.zhishuArr, ({ value }) => value),
                    },
                ],
                series: [
                    {
                        tooltip: {
                            show: false,
                        },
                        z: 4,
                        type: "pictorialBar",
                        symbolSize: ["15", "4"],
                        symbolRepeat: "fixed",
                        barMinHeight: "3px",
                        barWidth: 100,
                        symbol: "rect",
                        itemStyle: {
                            normal: {
                                color: "#3E3D56",
                            },
                        },
                        data: Array.from(this.zhishuArr, ({ value }) => value),
                    },
                    {
                        z: 6,
                        type: "pictorialBar",
                        symbolSize: ["15", "4"],//设置图形的长宽
                        animation: true,
                        symbolRepeat: "fixed",
                        symbolClip: true,
                        symbolPosition: "start",
                        barWidth: 100,
                        symbolOffset: [0, 0],
                        symbol: "rect",//配置块的样式，可以是图片
                        itemStyle: {
                            normal: {
                                color: "#45F4F7",
                            },
                        },
                        data: Array.from(this.zhishuArr, ({ value }) => value),
                        label: {
                            normal: {
                                show: false,
                                textStyle: {
                                    color: "#18fcff",
                                    fontSize: 14,
                                },
                                position: "right",
                                offset: [35, 0],
                            },
                        },
                    },
                    {
                        type: "bar",
                    },
                ],
            };
            myChart.setOption(option);
            window.onresize = function () {
                myChart.resize();
            };
        },
    },
};
</script>
<style>
.el-table,
.el-table__expanded-cell {
    background: transparent;
}
</style>
<style lang="stylus" scoped>
@import '../../../assets/css/varibles.styl'
.leftTop >>> .el-table, .leftTop >>> .el-table__expanded-cell
    background transparent
.leftTop >>> .el-table th, .leftTop >>> .el-table tr
    background transparent
.leftTop
    width vw(530)
    height vh(443)
    box-sizing border-box
    background url('/images/left1.png') no-repeat
    background-size cover
    display flex
    padding vh(20) vw(30)
    .leftTopLeft
        width vw(225)
        .title
            display flex
            padding-bottom vh(20)
            font-size vw(18)
            cursor pointer
            .titleImg
                width vw(23)
                height vh(25)
                background url('/images/hdfzs.png') no-repeat
                background-size cover
                background-size 100% 100%
                margin-right vw(5)
            .titleNum
                color #45F4F7
                font-size vw(21)
                margin-left vw(25)
        .content
            #leftTopChart1
                width vw(250)
                height vh(330)
    .leftTopRight
        width:vw(180)
            height vh(350)
        margin-left vw(30)
        color #A1EAEB
        .leftTopRightTabs
            display flex
            width vw(169)
            height vh(30)
            font-size vw(15)
            line-height vh(30)
            justify-content space-around
            background url('/images/tabs.png') no-repeat
            background-size cover
            margin-bottom vh(20)
            .quanxian.fontActive1
                color #000
            .quansheng.fontActive2
                color #000
        .content
            // height:vh(270)
            .tableBody
                display flex
                flex-direction column
                justify-content space-between
                .tableBodyTd
                    display flex
                    font-size vw(15)
                    padding vh(5) 0
                    .tableBodyId
                        color #45F4F7
                        border 1px solid #419BA9
                        border-radius 50%
                        flex-shrink 0
                        width vw(21)
                        height vh(21)
                        line-height vh(21)
                        text-align center
                        font-size vw(14) 
                    .tableBodyId.active1
                        color #D6A95F
                    .tableBodyQuyu
                        text-indent 10px
                        flex 5
                        color #fff
                    .tableBodyQuyu.active2
                        color #D6A95F
                    .tableBodyNum
                        flex 3
                        color #fff
                    .tableBodyNum.active3
                        color #D6A95F
            .seeMore
                color #45F4F7
                width 50%
                line-height vh(20)
                margin-top vh(5)
                float right
                font-size vw(12)
                border 1px solid #45F4F7
                border-radius 10px
                text-align center
</style>